<template>
    <button v-if="data.child && data.child.length > 0" ref="itemRef"
        :class="`bckgc empty_button right_item right_item_${theme} ${!isEnable() ? 'right_item_enable_' + theme : ''}`"
        :style="{ height: itemSize.height + 'px' }" @mouseenter="handle_enter" @mouseleave="handle_leave">
        {{ data.name }}
        <RightMenuList v-if="data.child && data.child.length > 0" :data="data.child" :item-size="itemSize" :setting="childInfo"
            :theme="theme"></RightMenuList>
    </button>
    <button v-else
        :class="`bckgc empty_button right_item right_item_${theme}  ${!isEnable() ? 'right_item_enable_' + theme : ''}`"
        :style="{ height: itemSize.height + 'px' }" @click="handle_click">
        {{ data.name }}
    </button>
</template>

<script lang=ts setup>

const props = defineProps({
    data: <any>Object,
    theme: String,
    itemSize: <any>Object,
    top: <any>Number,
    left: <any>Number
})

const cancelTimer = ref()
const childPosition = ref("")
const itemRef = ref()
const childInfo = ref<any>({
    status: false,
    x: 0,
    y: 0,
})

/**
 * 鼠标进入菜单项时，计算子菜单展示的位置
 */
function
    handle_enter() {
    let x = 0;
    let y = 0;
    let screen = getScreen();
    let item = itemRef.value;
    let itemX = props.left;//当前菜单项的x坐标
    let itemY = props.top;//当前菜单项的y坐标
    let childHeight = props.data.child.length * item.clientHeight;
    //计算坐标x
    if ((screen.width - itemX - item.clientWidth) > item.clientWidth) {
        x = itemX + item.clientWidth;
        childPosition.value = "right";
    } else if (itemX > item.clientWidth) {
        x = itemX - item.clientWidth;
    }
    if (childPosition.value === "") childPosition.value = "left";
    //计算坐标y
    if ((screen.height - itemY) > childHeight) {
        y = itemY + 10;
    } else if (screen.height > childHeight) {
        y = screen.height - childHeight - 20;
    }
    noCloseChild();
    childInfo.value = {
        status: true,
        x: x,
        y: y,
    }
}

/**
 * 鼠标离开时，判断从哪个方向离开
 * @param e
 */
function handle_leave() {
    noCloseChild();
    cancelTimer.value = setTimeout(() => {
        closeChild();
    }, 100);
}

/**
 * 获取窗口大小
 */
function getScreen() {
    return {
        width: document.body.clientWidth,
        height: document.body.clientHeight,
    }
}

function isEnable() {
    return props.data.enable !== false;
}

/**
 * 处理点击事件，先关闭按钮，在处理点击事件
 */
function handle_click() {
    if (!isEnable()) return;
    close();
    setTimeout(() => {
        if (props.data.click) props.data.click();
    }, 10);
}
/**
 *  通知整个菜单关闭
         */
function close() {
    // this.$parent.close();
}

/**
 * 关闭子菜单
 */
function closeChild() {
    childInfo.value = {
        status: false,
        x: 0,
        y: 0,
    }
    childPosition.value = "";
}

/**
 * 取消关闭子菜单
 */
function noCloseChild() {
    clearTimeout(cancelTimer.value);
    cancelTimer.value = null;
}
</script>

<style scoped>
.right_item {
    display: block;
    width: 100%;
    text-align: left;
    padding-left: 5px;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: #ffffff;
    border: 0px;
}

button:hover {
    background-color: #e2e3e3 !important;
}

.right_item_light {
    font-size: 15px;
}

.right_item_light:hover {
    background-color: #ffffff;
}

.right_item_dark {
    color: #e2e2e2;
    font-size: 13px;
}

.right_item_dark:hover {
    background-color: #444444;
}

.right_item_enable_light {
    color: #b6b6b6;
}

.right_item_enable_dark {
    color: #797979;
}

.right_item_arrow {
    width: 25px;
    height: 25px;
    float: right;
}
</style>
